<template>
  <breadcrumb></breadcrumb>
  <el-alert title="注意：只允许为第三级分类设置相关参数！" type="warning" show-icon />
  <el-form>
    <el-form-item label="选择分类">
      <el-cascader :options="selectData" :props = "SelectProps" v-model="selectKeys" @change="handleSelect"/>
    </el-form-item>
  </el-form>
  <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
    <el-tab-pane label="动态参数" name="many">
      <tabPane
          buttonName="添加参数"
          tableName='参数名称'
          :selectData="paramsData"
          @EditSure="() => EditSure()"
          @EditClose="() => EditClose()"
          @EditHandle="(row) => EditHandle(row)"
          @delHandle="(row) => delHandle(row)"
          @addCategories="() => addCategories()"
          @addClose="() => addClose()"
          @addSure="() => addSure()"
      />
    </el-tab-pane>
    <el-tab-pane label="静态属性" name="only">
      <tabPane buttonName="添加属性" tableName='属性名称' :selectData="paramsData" :paramsData="paramsData" @EmitSure="() => EditSure()"
               @EditClose="() => EditClose()"
               @EditHandle="(row) => EditHandle(row)"
               @delHandle="(row) => delHandle(row)"
               @addCategories="() => addCategories()"
               @addClose="() => addClose()"
               @addSure="() => addSure()"/>
    </el-tab-pane>
  </el-tabs>

</template>

<script setup >
import { ref, } from 'vue';
import {onMounted} from "vue";
import { useShopStore } from "../../store/index.js"

import {
  EditAxisCategories,
  getCategories,
  getGoodsCategories,
  EditCategoriesName,
  delCategoriesName, addCategoriesName
} from "../../apis/goods.js";
const user = useShopStore()
const selectData = ref([])
const selectKeys = ref([])
const activeName = ref('many')
const paramsData = ref([])
let arr = ref([]);


const EditShow = ref(false)
const EditName = ref('')
const Edit_vals = ref([]);
const Edit_sel = ref('');
const Edit_id = ref('');
const cat_id = ref('')
const EditClose = () => {
  user.setEditShow(false);
}
const addClose = () => {
  user.setAddShow(false)
}
const addSure = () => {
  user.setAddShow(false)
  addCategoriesName(user.cat_id,user.addName,activeName.value).then(res => {
    getParamsData();
  })
}
const EditSure = () => {
  EditCategoriesName(Edit_id.value,cat_id.value,Edit_sel.value,user.EditName,Edit_vals.value).then(res => {
    getParamsData();
  })
  user.setEditShow(false);
}
const delHandle = (row) => {
  delCategoriesName(row.cat_id,row.attr_id).then(res => {
    getParamsData();
  })
}
const addCategories = () => {
  user.setAddShow(true);
}
const EditHandle = (row) => {
  user.setEditShow(true);
  user.setEditName(row.attr_name);
  Edit_vals.value = row.attr_vals;
  Edit_sel.value = row.attr_sel
  Edit_id.value = row.attr_id;
  cat_id.value = row.cat_id;
}
const SelectProps = {
  label:'cat_name',
  value:'cat_id',
  children:'children',
  checkStrictly: true,
  expandTrigger: 'hover'
}
const addForm = ref({
  cat_name: '',
  cat_pid:0,
  cat_level:0
})
const handleClick = () => {
  if(activeName.value === 'many'){
    activeName.value = 'only'
  } else {
    activeName.value = 'many'
  }
  getParamsData();
}
const handleSelect = () => {
  getParamsData()
}
const getParamsData = async () => {
  // 判断是否选中三级分类，如果未选中，则要重新选择
  if (selectKeys.value.length !== 3) {
    selectKeys.value = []
    paramsData.value = []
    return
  }
  // 根据所选分类，获取动态参数或静态属性
  await getCategories(selectKeys.value[2],activeName.value).then(res => {
    arr.value = res.data;
    res.data.forEach(item => {
      item.attr_vals = item.attr_vals ? item.attr_vals.split(','): []
    })
    paramsData.value = res.data;
    user.setCatId(paramsData.value[0].cat_id)
  })
}
onMounted(() => {
  getGoodsCategories(3).then(res => {
    selectData.value = res.data
  })
})
</script>

<style scoped>
.el-form {
  margin:0 20px;

}
:deep(.el-form-item){
  margin-top: 20px;
}
</style>
